.floatMatch.show {
    display: block;
}

.floatMatch {
    display: none;
    background: url('../img/floatMatch-bg.jpg') no-repeat top center / cover;
    z-index: 2;
    .page-wrap {
        width: 100%;
        height: 100%;
        display: -moz-box;
        display: -webkit-box;
        display: box;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        box-orient: vertical;
    }
    .main-cont {
        width: 100%;
        height: 100%;
        display: -moz-box;
        display: -webkit-box;
        display: box;
        background: none;
        .left-nav {
            width: 1.26rem;
            height: 100%;
            margin-top: 0.1rem;
            border-right: 1px solid #ccc;
            ul {
                width: 100%;
                height: 9.9rem;
                li {
                    width: 100%;
                    height: 0.9rem;
                    background-repeat: no-repeat;
                    background-size: .5rem 9.62rem;
                    background-image: url('../img/floatMatch-icon.png');
                    .router-link-active {}
                }
                li.active {
                    background-size: .85rem 9.93rem;
                    background-image: url('../img/floatMatch-icon-active.png');
                } // li:nth-child(n){
                //     background-color: red;
                // }
                // li:nth-child(2n){
                //     background-color: #0ce80c;
                // }
                .yxkf {
                    background-position: center -0.62rem;
                }
                .yxkf.active {
                    background-position: center -0.8rem;
                }
                .znhl {
                    background-position: center 0.3rem;
                }
                .znhl.active {
                    background-position: center 0.16rem;
                }
                .aiaq {
                    background-position: center -5.28rem;
                }
                .aiaq.active {
                    background-position: center -5.44rem;
                }
                .tmcy {
                    background-position: center -7.14rem;
                }
                .tmcy.active {
                    background-position: center -7.3rem;
                }
                .ycwx {
                    background-position: center -1.58rem;
                }
                .ycwx.active {
                    background-position: center -1.68rem;
                }
                .qndy {
                    background-position: center -4.36rem;
                }
                .qndy.active {
                    background-position: center -4.52rem;
                }
                .qnbj {
                    background-position: center -2.5rem;
                }
                .qnbj.active {
                    background-position: center -2.64rem;
                }
                .qnyy {
                    background-position: center -3.4rem;
                }
                .qnyy.active {
                    background-position: center -3.58rem;
                }
                .yycy {
                    background-position: center -6.2rem;
                    ;
                }
                .yycy.active {
                    background-position: center -6.38rem;
                }
                .cysj {
                    background-position: center -8.9rem;
                }
                .cysj.active {
                    background-position: center -9.12rem;
                }
                .dsp {
                    background-position: center -8.06rem;
                }
                .dsp.active {
                    background-position: center -8.2rem;
                }
            }
        }
        .right-cont {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
            height: 100%;
            width: 100%;
            .box-wrap {
                width: 96%;
                height: 91%;
                padding: 1% 0 10% 4%;
            }
            .float-box {
                width: 100%;
                height: 100%;
                .swiper-wrapper {
                    width: 94%;
                    padding-right: 6%;
                }
                .swiper-slide {
                    height: auto;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                }
                .cont-view {
                    display: none;
                    .box.box2 {
                        .text-title {
                            .title {
                                color:#707070;
                                -moz-box-flex: 1;
                                -webkit-box-flex: 1;
                                box-flex: 1;
                            }
                            .arrow {
                                -webkit-transform: rotate(0deg);
                                transform: rotate(0deg);
                                background-image: none;
                                -moz-box-flex: 1;
                                -webkit-box-flex: 1;
                                box-flex: 1;
                                text-align: right;
                                padding-right: 0.32rem;
                                font-size: 0.28rem;
                                line-height: 1.08rem;
                            }
                        }
                    }
                }
                .cont-view.active {
                    display: block;
                }
                .box:nth-child(1){
                    margin-top: 0.2rem; 
                }
                .box {
                    width: 100%;
                    height: auto;
                    margin-bottom: 0.16rem;
                    overflow: hidden;
                    border-radius: 0.2rem;
                    background: #fff;
                    color:#707070;
                    .text-title {
                        width: 100%;
                        height: 1.08rem;
                        display: -moz-box;
                        display: -webkit-box;
                        display: box; // -moz-box-direction:reverse;
                        // -webkit-box-direction:reverse;
                        // box-direction:reverse;
                        .title {
                            padding-left: 0.32rem;
                            font-size: 0.28rem;
                            line-height: 1.08rem;
                            -moz-box-flex: 1;
                            -webkit-box-flex: 1;
                            box-flex: 1;
                        }
                        .arrow {
                            width: 1rem;
                            height: 100%;
                            -webkit-transform: rotate(180deg);
                            transform: rotate(180deg);
                            background: url('../img/floatMatch-arrow.png') no-repeat center / cover;
                            background-size: 0.39rem 0.2rem;
                        }
                    }
                    .text-cont {
                        overflow: hidden;
                        height: 0;
                        width: 100%;
                    }
                }
                .box.active {
                    .text-title {
                        .title {
                            color: #55a6eb;
                        }
                        .arrow {
                            background-image: url('../img/floatMatch-arrow-active.png');
                        }
                    }
                    .text-cont {
                        width: 100%;
                        height: auto;
                        .cont {
                            border-top: 1px solid #f9f9f9;
                            padding: 0.24rem 0.32rem;
                            p {
                                font-size: 0.24rem;
                                line-height: 0.34rem;
                                span {
                                    font-weight: bolder;
                                    color:#303030;
                                }
                                .red-text{
                                    color: red;
                                }
                                .blue-text{
                                    color: #55a6eb;
                                }
                                a{
                                    color: #55a6eb;
                                    font-size: 0.24rem;
                                }
                            }
                        }
                    }
                }
                .btn-wrap{
                    margin: 0.4rem 0 1rem 0;
                    width: 100%;
                    height: 0.86rem;
                    display: -moz-box;
                    display: -webkit-box;
                    display: box;
                    .btn-page{
                        position: relative;
                        -moz-box-flex: 1;
                        -webkit-box-flex: 1;
                        box-flex: 1;
                        .tag{
                            font-size: 0.28rem;
                            color: #fff;
                            width: 80%;
                            height: 0.86rem;
                            text-align: center;
                            line-height: 0.86rem;
                            border-radius: 2rem;
                            background: #0079de;
                            a{
                                display: block;
                                width: 100%;
                                height: 100%;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
    .top {
        position: relative;
        width: 100%;
        height: 1.2rem;
        background: #f6f6f4;
        box-shadow: 0px 1px 5px #888888;
        .btn-back-zoom {
            position: absolute;
            top: 0;
            left: 0;
            width: 1.2rem;
            height: 1.2rem;
            background: url('../img/layer-btn-back.png') no-repeat center;
            background-size: 0.2rem 0.38rem;
            a {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .text-title {
            width: 2.44rem;
            height: 0.5rem;
            color: #007ae1;
            // font-size: 0.4rem;
            line-height: 1.2rem;
            text-align: center;
            // background: red;
            .title-img{
                width: 100%;
                height: 100%;
                background: url('../img/all-title-font.png') no-repeat top left / 7.50rem 13.34rem;
            }
            .znhl{
                background-position: -4.1rem -6.42rem;
            }
            .yxkf{
                background-position:-4.1rem -7.5rem;
            }
            .ycwx{
                background-position: -4.1rem -1.16rem;
            }
            .aiaq{
                background-position: -4.1rem -2.08rem;
            }
            .tmcy{
                background-position: -4.1rem -3.16rem;
            }
            .dsp{
                background-position: -4.1rem -4.19rem; 
            }
            .cysj{
                background-position: -4.1rem -5.14rem;
            }
            .yycy{
                background-position: -4.1rem -8.44rem;
            }
            .qnbj{
                background-position: -4.1rem -9.54rem;
            }
            .qndy{
                background-position: -4.1rem -10.6rem;
            }
            .qnyy{
                background-position: -4.1rem -11.54rem;
            }
        }

        .btn-menu {
            position: absolute;
            top: 0;
            right: 0;
            width: 1.2rem;
            height: 1.2rem;
            background: url('../img/main02-btn-menu.png') no-repeat center / cover;
            background-size: 0.64rem 0.35rem;
        }
    }
    .main {
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        box-flex: 1;
        width: 100%;
        height: 100%;
        .main-page{
            width: 100%;
            height: 100%;
        }
    }
    .pages{
        display: none;
        width: 100%;
        height: 100%;
    }
    .pages.show{
        display: block;
    }
}